﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    ViewData["Title"] = "新增客户";
}

<div class="layui-container" style="padding:20px">
    <div class="layui-row">
        <div class="layui-col-md12">
            <h2>新增客户</h2>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md8 layui-col-md-offset2">
            <form class="layui-form" id="AddClient">
                <div class="layui-form-item">
                    <label class="layui-form-label">客户编号</label>
                    <div class="layui-input-block">
                        <input type="text" name="ClientCode" lay-verify="required" placeholder="客户编号将自动生成" autocomplete="off" class="layui-input" readonly>
                        <div class="layui-form-mid layui-word-aux">系统自动生成</div>
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <label class="layui-form-label">客户名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="ClientName" lay-verify="required" placeholder="请输入客户名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <label class="layui-form-label">客户类型</label>
                    <div class="layui-input-block">
                        <select name="CTypeId" lay-verify="required" lay-search>
                            <option value="">请选择客户类型</option>
                        </select>
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <label class="layui-form-label">联系人</label>
                    <div class="layui-input-block">
                        <input type="text" name="ClientContact" lay-verify="required" placeholder="请输入联系人姓名" autocomplete="off" class="layui-input">
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block">
                        <input type="radio" name="ClientState" value="true" title="启用" checked>
                        <input type="radio" name="ClientState" value="false" title="禁用">
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-block">
                        <input type="tel" name="ClientTel" lay-verify="required|phone" placeholder="请输入手机号码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block">
                        <textarea name="ClientRemark" placeholder="请输入备注信息" class="layui-textarea" rows="3"></textarea>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="AddClient">
                            <i class="layui-icon layui-icon-ok"></i> 提交
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary">
                            <i class="layui-icon layui-icon-refresh"></i> 重置
                        </button>
                        <button type="button" class="layui-btn layui-btn-warm" id="backToList">
                            <i class="layui-icon layui-icon-left"></i> 返回列表
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="~/layui/layui.js"></script>
<script>
layui.use(['form', 'layer'], function(){
    var form = layui.form;
    var layer = layui.layer;
    
    /**
     * 表单提交事件处理
     * 当用户点击提交按钮时触发
     */
    form.on('submit(AddClient)', function(data){
        // 获取表单中的所有字段数据
        var formData = data.field;
        
        // 前端数据验证 - 检查必填字段
        if (!formData.ClientName || formData.ClientName.trim() === '') {
            layer.msg('请输入客户名称', {icon: 2});
            return false;
        }
        
        if (!formData.CTypeId) {
            layer.msg('请选择客户类型', {icon: 2});
            return false;
        }
        
        if (!formData.ClientContact || formData.ClientContact.trim() === '') {
            layer.msg('请输入联系人', {icon: 2});
            return false;
        }
        
        if (!formData.ClientTel || formData.ClientTel.trim() === '') {
            layer.msg('请输入手机号', {icon: 2});
            return false;
        }
        
        /**
         * 提交客户数据到后端API
         * 接口地址：http://localhost:5054/api/Client/AddClinent
         */
        $.ajax({
            url: 'http://localhost:5054/api/Client/AddClinent',
            type: 'POST',
            contentType: 'application/json',
            // 构造提交的数据对象，确保字段名与后端API期望的格式一致
            data: JSON.stringify({
                clientCode: $('input[name="ClientCode"]').val(),      // 客户编号（自动生成）
                clientName: formData.ClientName,                      // 客户名称
                cTypeId: parseInt(formData.CTypeId),                  // 客户类型ID（转换为整数）
                clientContact: formData.ClientContact,                // 联系人
                clientState: formData.ClientState === 'true',         // 客户状态（转换为布尔值）
                clientTel: formData.ClientTel,                        // 联系电话
                clientRemark: formData.ClientRemark || ''             // 备注信息（为空时设为空字符串）
            }),
            /**
             * AJAX请求成功回调函数
             * 处理后端返回的响应结果
             */
            success: function(res) {
                // 检查响应状态码，200表示成功
                if (res && res.code === 200) {
                    // 显示成功消息，并在用户确认后跳转到客户列表页面
                    layer.msg('客户添加成功！', {icon: 1}, function(){
                        window.location.href = '/Client/Show';
                    });
                } else {
                    // 显示失败消息，包含后端返回的错误信息
                    layer.msg('客户添加失败：' + (res.message || '未知错误'), {icon: 2});
                }
            },
            /**
             * AJAX请求失败回调函数
             * 处理网络错误、服务器错误等异常情况
             */
            error: function(xhr, status, error) {
                // 显示用户友好的错误提示
                layer.msg('网络错误，请稍后重试', {icon: 2});
                // 在控制台输出详细错误信息，便于调试
                console.error('提交失败:', error);
            }
        });
        
        return false; // 阻止表单默认提交
    });
    
    /**
     * 返回列表按钮点击事件
     * 点击后跳转回客户列表页面
     */
    $('#backToList').click(function(){
        window.location.href = '/Client/Show';
    });
    
        /**
     * 自动生成客户编号
     * 编号格式：KH + 时间戳后8位 + 3位随机数
     * 例如：KH12345678901
     */
    function generateClientCode() {
        // 获取当前时间戳（毫秒）
        var timestamp = new Date().getTime();
        // 生成0-999的随机数
        var random = Math.floor(Math.random() * 1000);
        // 拼接客户编号：KH + 时间戳后8位 + 3位随机数（不足3位前面补0）
        var clientCode = 'KH' + timestamp.toString().slice(-8) + random.toString().padStart(3, '0');
        // 将生成的编号填入客户编号输入框
        $('input[name="ClientCode"]').val(clientCode);
    }
    
    // 页面加载时生成客户编号
    generateClientCode();
    
    // 加载客户类型数据
    loadClientTypes();
});

/**
 * 从后端API接口动态加载客户类型数据到下拉框
 * 接口地址：http://localhost:5054/api/Client/GetCType
 */
function loadClientTypes() {
    // 发起AJAX请求获取客户类型数据
    $.ajax({
        url: 'http://localhost:5054/api/Client/GetCType',
        type: 'GET',
        dataType: 'json',
        success: function(res) {
            // 检查响应是否成功且有数据
            if (res && res.code === 200 && res.data) {
                // 获取客户类型下拉框元素
                var select = $('select[name="CTypeId"]');
                
                // 清空现有选项，但保留"请选择客户类型"这个默认选项
                select.find('option:not(:first)').remove();
                
                // 遍历后端返回的客户类型数据，动态生成下拉框选项
                $.each(res.data, function(index, item) {
                    // 只显示未删除的客户类型（isDel为false）
                    if (!item.isDel) {
                        // 创建新的option元素：value为cTypeId，显示文本为cTypeName
                        select.append('<option value="' + item.cTypeId + '">' + item.cTypeName + '</option>');
                    }
                });
                
                // 重新渲染Layui表单，确保新添加的选项样式正确显示
                layui.form.render('select');
            } 
        }
    });
}
</script>


